<template>
  <view class="sayBoxItem" :key="item.articleId" :style="{ backgroundImage: 'url(' + item.info + ')' }"
    @click="goToJobSay(item)">
    <view class="bottom">
      <view class="content">{{ item.content }}</view>
      <view class="avatarName">
        <view class="left">
          <img :src="item.personPic" />
          <text>{{ item.ownName }}</text>
        </view>
        <view class="right">
          <img :src="jobSayViewSrc" />
          <text>{{ kFormatter(item.vCnt) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default: function () {
        return {};
      },
    },

    //标识内容相关  2-从职业大全那边点击进入
    relatedType: {
      type: Number,
      default: 0,
    },

    positionId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      realPositionId: "",
      personId: uni.getStorageSync("person-id").slice(2) || "",
      articleId: this.item.articleId,
      jobSayViewSrc:
        this.$imgBaseSelf +
        "career/positionDictionary/job_detail_say_view.webp",
    };
  },

  watch: {
    positionId: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          this.realPositionId = val;
        }
      },
    },
  },

  methods: {
    kFormatter(num) {
      if (num >= 10000 && num < 1000000) {
        return (num / 1000).toFixed(1) + "K";
      } else if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + "M";
      }
      return num;
    },
    goToJobSay(item = "") {
      console.log("goToJobSay", item);

      // 小程序播放
      uni.navigateTo({
        url:
          "/pagesSub/career/video/playSimple?articleId=" +
          item.articleId +
          "&relatedType=" +
          this.relatedType +
          "&positionId=" +
          this.realPositionId,
      });

      return;

      // 网页播放
      uni.navigateTo({
        // url: `/pagesSub/careerNew/positionDictionary/JobDetailWebview?sharePersonId=24384836&articleId=2241679303390688&shcd=ocgkkngnkoc`,
        url: `/pagesSub/careerNew/positionDictionary/JobDetailWebview?sharePersonId=${
          item.ownId
        }&articleId=${item.articleId}&videoSrc=${encodeURIComponent(
          item.src
        )}&title=${item.content}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.sayBoxItem {
  display: inline-block;
  width: 335rpx;
  height: 435rpx; /* 宽高比为1.3:1 */
  margin: 8rpx; /* 底部间隔值 */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 8rpx;

  .bottom {
    position: relative;
    display: flex;
    flex-direction: column;
    top: 258rpx;
    width: 100%;
    height: 178rpx;
    border-radius: 8rpx;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.45) 100%
    );
    .content {
      margin-top: 46rpx;
      font-size: 26rpx;
      line-height: 36rpx;
      color: #fff;
      font-weight: bold;
      width: 100%;
      padding: 0 20rpx;
      overflow: hidden; //超出文本隐藏
      text-overflow: ellipsis; ///超出部分省略号显示
      display: -webkit-box; //弹性盒模型
      -webkit-box-orient: vertical; //上下垂直
      -webkit-line-clamp: 2; //自定义行数
    }
    .avatarName {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 400;
      color: #ffffff;
      width: 100%;
      flex: 1;
      padding: 0 20rpx;
      .left {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
        text {
          max-width: 140rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        img {
          width: 36rpx;
          height: 36rpx;
          border-radius: 50%;
          margin-right: 12rpx;
        }
      }
      .right {
        display: flex;
        align-items: center;
        font-size: 20rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;

        img {
          width: 26rpx;
          height: 26rpx;
          border-radius: 50%;
          margin-right: 6rpx;
        }
      }
    }
  }
}
</style>
